<template>
    <ul class="progress" :style="outStyle">
        <li class="line" v-for="(item,index) in data" :key="index" :class="{pay:item}" :style="[{transform:'rotate(' + index*angle + 'deg)'},inlineStyle]"></li>
    </ul>
</template>

<script type="text/ecmascript-6">
    export default {
        props: {
            payNum: {
                type: Number
            },
            size: {
                type: String
            }
        },
        data () {
            return {
                data: [],
                outStyle: {
                    width: this.size + 'vw',
                    height: this.size + 'vw'
                   },
                inlineStyle: {
                    left: parseInt(this.size) / 2 + 'vw',
                    transformOrigin: '0 ' + parseInt(this.size) / 2 + 'vw'
                },
                num: Math.floor(parseInt(this.size) * 1.2),
                angle: 360 / Math.floor(parseInt(this.size) * 1.2)
            };
        },
        created() {
            let num = this.num;
            let hasPay = this.payNum;
            let resultNum = Math.floor(num * hasPay * 0.01);
            let restNum = num - resultNum;
            let a = new Array(resultNum).fill(true);
            let b = new Array(restNum).fill(false);
            this.data = [...a, ...b];
        }
    };
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    @import "../../assets/stylus/main.styl";
    .progress {
        text-align center
        position relative
        & .line {
            position absolute
            width: 1vw;
            height: 3vw;
            border-radius: 5px;
            background #fee0b9
            &.pay{
                background white
            }
        }
    }
</style>
